<template>
	<view class="content">
    <!-- topbar 顶部导航栏 -->
    <topbar v-if="isScroll" :list="swiperList" :name="titleName"></topbar>
    
    <!-- 轮播图组件 -->
    <swiper-list v-if="swiperList && swiperList.length>0" :list="swiperList"></swiper-list>
	</view>
</template>

<script>
  import {getHomeData, getInitData} from "@/api/home.js"
  // 导入topbar组件
  import topbar from "./components/topbar.vue"
  // 导入轮播图组件
  import swiperList from "./components/swiperList.vue"
	export default {
    components: {
      topbar,
      swiperList
    },
    computed: {
      swiperList() {
        return this.templateData?.home[0]?.content?.list
      },
      titleName() {
        return this.initData?.shop?.name
      }
    },
		data() {
			return {
				title: 'Hello',
        initData: null,
        templateData: null,
        isScroll: false
			}
		},
    methods: {
      async getHomeData() {
        // 获取模版数据
         const data = await getHomeData();
         this.templateData = data.data
      },
      async getInitData() {
        // 获取初始化的公共数据
        const data = await getInitData()
         this.initData = data.data
      },
    },
		onLoad() {
      // 1. 获取初始化数据
      this.getInitData()
      // 2.获取首页模版数据
      this.getHomeData()
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
